<template>
  <a-modal
    :open="open"
    width="740px"
    :title="formState?.type ? '修改仪器类型' : '新增仪器类型'"
    centered
    :ok-button-props="{ disabled: formatOkBtn(!isCompleted) }"
    @cancel="onCancel"
    @ok="onSave"
  >
    <a-form ref="formRef" class="flex flex-wrap" :model="formState" :label-col="{ style: { width: '100px' } }">
      <a-form-item label="分类名称" class="w-1/2" v-bind="validateInfos.categroyCode">
        <a-select
          v-model:value="formState.categroyCode"
          :options="categoriesList"
          :field-names="{ label: 'categoryName', value: 'categoryCode' }"
          placeholder="请选择"
        />
      </a-form-item>
      <a-form-item label="仪器类型" class="w-1/2" v-bind="validateInfos.instrumentTypeName">
        <a-input v-model:value="formState.instrumentTypeName" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="仪器类型ID" class="w-1/2" v-bind="validateInfos.id">
        <a-input v-model:value="formState.id" :disabled="!!rowData.id" placeholder="请输入" />
      </a-form-item>

      <a-form-item label="样本类型" class="w-[180px] mr-9">
        <SelectItem v-model:value="formState.sampleType1" class="!min-w-[130px]" type="DT00261" placeholder="请选择" allow-clear />
      </a-form-item>
      <a-form-item label="" class="ml-5">
        <SelectItem v-model:value="formState.sampleType2" class="!min-w-[110px]" type="DT00262" placeholder="请选择" allow-clear />
      </a-form-item>
      <a-form-item label="样本前缀" class="w-1/2">
        <a-input v-model:value="formState.startNo" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="编码格式" class="w-1/2">
        <SelectItem v-model:value="formState.encodingFormat" type="DT00280" value-key="dictItemName" placeholder="请选择" allow-clear />
      </a-form-item>
      <a-form-item label="通讯模式" class="w-1/2">
        <SelectItem v-model:value="formState.communicationMode" type="DT00281" value-key="dictItemName" placeholder="请选择" allow-clear />
      </a-form-item>
      <a-form-item label="版本号" class="w-1/2">
        <a-input v-model:value="formState.versionNumber" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="样本号位置" class="w-1/2">
        <a-input v-model:value="formState.startNoLocation" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="条码位置" class="w-1/2">
        <a-input v-model:value="formState.barcodeLocation" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="通道号位置" class="w-1/2">
        <a-input v-model:value="formState.channelLocation" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="检验结果位置" class="w-1/2">
        <a-input v-model:value="formState.testResultLocation" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="开始符" class="w-1/2">
        <a-input v-model:value="formState.stx" placeholder="请输入" @keyup="formState.stx = formState.stx.slice(0, 50)" />
      </a-form-item>
      <a-form-item label="结束符" class="w-1/2">
        <a-input v-model:value="formState.etx" placeholder="请输入" @keyup="formState.etx = formState.etx.slice(0, 50)" />
      </a-form-item>
      <a-form-item label="通讯方式" class="w-1/2">
        <a-radio-group v-model:value="formState.commType">
          <a-radio value="0">串口</a-radio>
          <a-radio value="1">TCPIP监听端口</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-if="formState.commType === '1'" label=" " class="w-1/2" required>
        <a-radio-group v-model:value="formState.masterSlave">
          <a-radio value="master">master</a-radio>
          <a-radio value="slave">slave</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="备注" class="w-full">
        <a-textarea v-model:value="formState.memo" row="3" placeholder="请输入" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import SelectItem from '@/components/SelectItem'

const emit = defineEmits(['update:open', 'success'])
const formRef = ref()
const formState = ref({
  commType: '0',
  categoryCode: '',
  instrumentTypeName: '',
  // sampleType1: '',
  sampleType2: '',
  // encodingFormat: '',
  masterSlave: ''
})
const categoriesList = ref([])
const props = defineProps({
  open: Boolean,
  state: Boolean,
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const formatOkBtn = (val) => {
  if (formState.value.commType === '1') {
    return val || !formState.value.masterSlave
  } else {
    return val
  }
}

const rulesState = ref({
  categroyCode: [{ required: true, message: '请输入班制名称' }],
  id: [{ required: true, message: '仪器类型ID' }],
  instrumentTypeName: [{ required: true, message: '请输入助记码' }]
  // sampleType1: [{ required: true, message: '请输入样本类型' }],
  // encodingFormat: [{ required: true, message: '请选择编码格式' }]
})
const { isCompleted, resetFields, validateInfos } = useForm(formState, rulesState)
const onSave = async () => {
  if (formState.value.commType === '1' && formState.value.masterSlave === '') {
    return message.error('请选择通讯方式')
  }
  const { code, msg } = await post('/lis/InstrumentType/doSaveInstrumentType', formState.value)
  if (code !== 0) return message.error(msg)
  message.success(msg)
  onCancel()
}
const getCategories = async () => {
  const { code, data, msg } = await post('/lis/InstrumentType/getLisCategoryList')
  if (code !== 0) return message.error(msg)
  categoriesList.value = data
}
const onCancel = () => {
  resetFields()
  emit('update:open', false)
  emit('success')
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      if (Object.keys(props.rowData).length > 0) {
        formState.value = { ...props.rowData }
      } else {
        formState.value = { ...props.rowData, commType: '0' }
      }
      getCategories()
    }
  },
  {
    immediate: true
  }
)
</script>
